﻿var uri = 'api/Heros';

$(document).ready(function () {
    var title = new Vue({
        el: '#title',
        data: {
            title: '王者荣耀'
        }
    });

    var heros = new Vue({
        el: '#heros',
        data: {
            heros: [{ name: "刘备" }, { name: "明世隐" }, {name:""}]
        }
    });

    // Send an AJAX request
    $.getJSON(uri).done(function (data) {
        var todosData = [];
        heros.heros = data;
        //$.each(data, function (key, item) {
        //    heros.heros.push({ name: formatItem(item) });

        //});

    });
    Vue.component('todo-item', {
        template: '<li>这是个待办项</li>'
    });
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义属性
        // 这个属性名为 todo。
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });


    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其他什么人吃的东西' }
            ]
        }
    })
});

function formatItem(item) {
    return item.Name + ': $' + item.Price;
}

function find() {
    var id = $('#prodId').val();
    $.getJSON(uri + '/' + id)
        .done(function (data) {
            app6.message = formatItem(data);
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}